<template>
    <view class="container">
        <view class="box" v-for="(item, index) in list" :key="index">
        	<view class="info">
        		<image :src="item.image"></image>
        		<view>
        			<view class="name">{{item.name}}</view>
        			<!-- <view class="adr">{{item.address}}</view> -->
        		</view>
        	</view>
        	<view class="content">{{item.content}}</view>
        	<view class="imgs" v-if="item.images.length > 0">
        		<image class="pics" :class="{pic : item.images.length == 1}" v-for="(el, ind) in item.images" :key="ind" :src="el.image" @click.stop="doPreview(item.images, ind)"></image>
        	</view>
            <!-- 操作点赞、评论 -->
        	<view class="times">
        		<view class="u-flex">
                    <view class="time">{{item.time}}</view>
                    <image src="../../static/icon/s_icon_07.png" class="s-icon-07" @click="del(item)"></image>
                    <view class="status3" v-if="item.examine == 3">已驳回</view>
                </view>
        		<view class="oprate">
                    <view class="oprate-btn" @click.stop="toWrite(item)">
                        <u-icon name="more-dot-fill" color="#54639c" size="34"></u-icon>
                    </view>
        			
        			<view class="oprate-box" v-show="item.isOpen">
                        <button open-type="share" class="share-button">
                        	<image :src="IMAGEURL + 'static/icon/share.png'" class="share-icon"></image>
                        	<view>分享</view>
                        </button>
                        <!-- 已点赞 islike = 1 -->
        				<view class="bor-l bor-r" @click.stop="changeLike(item)">
        					<image :src="IMAGEURL + 'static/icon/heart.png'" mode=""></image>
        					<view>{{item.islike == 1 ? '取消' : '赞'}}</view>
        				</view>
        				<view @click.stop="toComment(item, index)">
        					<image :src="IMAGEURL + 'static/icon/write_02.png'" mode=""></image>
        					<view>评论</view>
        				</view>
        			</view>
        		</view>
        	</view>
            <!-- 点赞、评论 -->
        	<view class="reply-box">
        		<view class="likes" v-if="item.like_name">
        			<u-icon name="heart" color="#54639c" size="34" class="u-m-r-10"></u-icon>
        			<view>{{item.like_name}}</view>
        		</view>
        		<view class="reply" v-for="(cel, cind) in item.commentList" :key="cind" @click.stop="reply(item, index, cel, cind)">
        			<view>
        				<text class="reply-text">
        		            {{cel.name}}
        		            <text v-if="!cel.reply_name" class="colon u-p-l-5 u-p-r-10">:</text>
        		        </text>
        		        <text class="u-p-l-10" v-if="cel.reply_name">
        		            回复<text class="reply-text u-p-l-10 u-p-r-10">{{cel.reply_name}}:</text>
        		        </text>
        				{{cel.content}}
        			</view>
        		</view>
                <template v-if="item.comment_count >= 10">
                    <view class="comment-con-open" v-if="item.moreShow" @click.stop="getMoreEvaluate(item)">
                        <view></view>
                        <text class="u-p-r-10">查看更多</text>
                        <u-icon name="arrow-down" size="24"></u-icon>
                    </view>
                    <view class="comment-con-open" v-else @click.stop="packUp(item)">
                        <view></view>
                        <text class="u-p-r-10">收起</text>
                        <u-icon name="arrow-up" size="24"></u-icon>
                    </view>
                </template>
        	</view>
        </view>
        
        <view style="height: 94rpx;padding-top: 30rpx;">
            <u-loadmore :status="status" v-if="status != 'loadmore'" />
        </view>
        
        <view class="btn" @click="$gTo(`/serve/pages/create-friend/create-friend`)">
            <image :src="IMAGEURL + 'static/icon/write.png'" class="write-icon"></image>
            <view>发布信息</view>
        </view>
        
        <view class="comment-input" v-show="show">
            <input autofocus type="text" v-model="content" placeholder="评论" :focus="focus" 
                @blur="blur" :auto-blur="true" :cursor-spacing="14" confirm-type="send" @confirm="confirm"/>
        </view>
    </view>
</template>

<script>
    import { IMAGEURL } from '@/static/js/common.js';
    export default {
        data() {
            return {
                IMAGEURL,
                show: false,//评论框
                focus: false,
                status: 'loadmore', //是否显示没有更多了
                page: 1,
                list: [], 
                content: '',//评论内容
                item: {},//社群
                nitem: {},//评论
            };
        },
        onShareAppMessage(res) {
            console.log('分享',res)
        	let _this = this
            let img = _this.item&&_this.item.images&&_this.item.images[0]&&_this.item.images[0].image || ''
            _this.item.isOpen = false
        	return {
        		title: '伙伴在线',
                imageUrl: img,
                path: '/serve/pages/tab/friends?parentID=' + _this.$getSync('userId') + '&id=' + _this.item.id
        	}
        },
        onLoad(option) {
            if (option.parentID) {
                uni.setStorageSync('parentID', option.parentID);
            }
            
            this.getList()
        },
        onShow() {
            this.show = false
        },
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
        methods: {
            // 删除
            del(item) {
                this.$confirm('确定删除吗？',()=>{
                    this.$ajax('delete_association', {
                    	user_token: this.$getSync('userToken'),
                    	id: item.id,//社群id
                    }).then(ret => {
                    	if (ret.success == 1000) {
                            this.$toast('删除成功')
                            setTimeout(() => {
                                this.list = []
                                this.page = 1
                                this.status = 'loadmore'
                                this.getList()
                            }, 500)
                    	} else {
                    		this.$toast(ret.msg);
                    	}
                    });
                })
            },
            
            // 发送
            confirm() {
                if (!this.content) {
                    this.$toast('内容不能为空！')
                    return
                }
                this.$ajax('insert_comment', {
                	user_token: this.$getSync('userToken'),
                	association_id: this.item.id,//社群id
                	reply_id:  this.nitem.id || '',//回复评论id
                	content: this.content,//内容
                }).then(ret => {
                	if (ret.success == 1000) {
                        this.show = false
                        this.item.commentList.unshift(ret.detail[0])
                        this.item = {}
                        this.nitem = {}
                        this.content = ''
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            // 回复评论
            reply(item, index, cel, cind) {
                this.item = item
                this.nitem = cel
                this.show = true
                this.focus = true
            },
            
            blur() {
                this.focus = false;
            },
            
            //切换点赞或评价按钮
            toWrite(item) {
                this.item = item
                item.isOpen = !item.isOpen
            },
            
            // 评论
            toComment(item, index) {
                item.isOpen = false
                this.show = true
                this.focus = true
            },
            
            // 收起
            packUp(item) {
                item.moreShow = true
                item.status = true
                item.page = 2
                item.commentList = item.comment
            },
            
            // 获取更多评论列表
            getMoreEvaluate(item) {
                if (item.status == false) return;
                this.$ajax('association_comment', {
                	user_token: this.$getSync('userToken'),
                	page: item.page,
                	limit: 10,
                    association_id: item.id,//社群id
                }).then(ret => {
                	if (ret.success == 1000) {
                		if (ret.detail && ret.detail.comment && ret.detail.comment.length > 0) {
                			item.commentList = item.commentList.concat(ret.detail.comment);
                			item.page++;
                			item.status = true
                            if (ret.detail.comment.length < 10) {
                            	item.status = false
                                item.moreShow = false
                            }
                		} else {
                			item.status = false
                            item.moreShow = false
                		}
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            // 获取社群列表
            getList() {
            	if (this.status == 'nomore') return;
            	this.status = 'loading';
            	this.$ajax('association', {
            		user_token: this.$getSync('userToken'),
            		page: this.page,
            		limit: 10,
                    type: 2,//1全部 2我的社群
            	}).then(ret => {
            		if (ret.success == 1000) {
            			if (ret.detail && ret.detail.association && ret.detail.association.length > 0) {
            				this.list = this.list.concat(ret.detail.association);
            				this.page++;
            				this.status = 'loadmore'
                            
                            this.list.forEach(cur => {
                                this.$set(cur, 'examine', cur.status) //审核状态
                                this.$set(cur, 'isOpen', false) //分享、点赞、评论 弹窗
                                this.$set(cur, 'moreShow', true) //查看更多评论
                                
                                this.$set(cur, 'commentList', cur.comment) //评论列表
                                this.$set(cur, 'page', 2) //评论列表页数
                                this.$set(cur, 'status', true) //是否可以获取更多评论
                            })
            			} else {
            				this.status = 'nomore'
            			}
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            
            // 点赞 取消点赞
            changeLike(item) {
                this.$ajax('association_like', {
                	user_token: this.$getSync('userToken'),
                    id: item.id,//社群id
                }).then(ret => {
                	if (ret.success == 1000) {
                        if (item.islike == 1) {
                            this.$toast('已取消')
                            let nameArr = item.like_name.split(',')
                            nameArr.forEach((cur, ind) => {
                                if (cur == item.name) {
                                    nameArr.splice(ind, 1) //删除我的名字
                                }
                            })
                            item.like_name = nameArr.join(',')
                        } else {
                            this.$toast('已点赞')
                            if (item.like_name) {
                                item.like_name = item.like_name + ',' + item.name
                            } else {
                                item.like_name = item.name
                            }
                        }
                        
                        item.islike = item.islike == 1 ? 0 : 1
                        item.isOpen = false
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            //预览照片
            doPreview(item, ind) {
                let arr = []
                item.forEach(cur => {
                    arr.push(cur.image)
                })
                uni.previewImage({
                    urls: arr,
                    current: ind,
                    longPressActions: {
                        success: function(data) {
                        },
                        fail: function(err) {
                        }
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    
    
    .comment-con-open {
    	width: 100%;
    	display: flex;
    	align-items: center;
    	font-size: 24upx;
    	color: #818181;
    	padding: 20rpx 3vw;
    }
    
    .comment-con-open>view {
    	width: 42upx;
    	height: 1px;
    	border-top: 1px solid #a7a7a7;
    	margin-right: 30upx;
    }
    
    .comment-input {
        width: 100vw;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #f5f5f5;
        // border-top: 1px solid #ededed;
        padding: 10upx 20upx;
        box-sizing: border-box;
        z-index: 999;
    }
    
    .comment-input > input {
        width: 100%;
        height: 76upx;
        border-radius: 15rpx;
        background-color: #fff;
        padding: 0 30upx;
        box-sizing: border-box;
    }
    
    
    page{
        background-color: #fff;
        border-top: 2rpx solid #e6e6e6;
    }
    .container{
        padding-bottom: 120rpx;
    }
    
    
    .box{
    	padding:40upx 3vw;
    	box-sizing: border-box;
    	border-bottom: 1px solid #e7e7e7;
    }
    .box:last-child{
        border-bottom: none;
    }
    .info{
    	display: flex;
    	align-items: center;
    }
    .info>image{
    	display: flex;
    	align-items: center;
    	width: 10vw;
    	height: 10vw;
    	margin-right: 2vw;
    	border-radius: 10upx;
    }
    .info>view{
    	width: 82vw;
    }
    .name{
    	width: 100%;
    	font-size:32upx;
    	font-weight: bold;
    	color: #545f7e;
    	margin-bottom: 4upx;
    }
    .adr{
    	font-size:24upx;
    	color: #909090;
    }
    .content{
    	padding-left: 12vw;
    	font-size:30upx;
        // margin-top: 20upx;
    	margin-bottom: 24upx;
    }
    .imgs{
    	padding-left: 12vw;
    	display: flex;
    	align-items: center;
    	flex-wrap: wrap;
    	margin-bottom: 22upx;
    }
    .pics{
        width: 25vw;
        height: 25vw;
        margin-right:1vw;
        margin-bottom: 1vw;
    }
    .pic{
        width: 35vw;
        height: 35vw;
        margin-right:1vw;
        margin-bottom: 1vw;
    }
    /* .imgs>image{
    	width:22.5vw;
    	height: 22.5vw;
    	margin-right:1vw;
    	margin-bottom: 1vw;
    } */
    .times{
    	padding-left: 12vw;
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    	
    }
    .times>.time{
    	font-size: 24upx;
    	color:#555558;
    }
    .status3{
        font-size: 24upx;
        color:#fd4646;
        margin-left: 20rpx;
    }
    .s-icon-07{
        width: 22rpx;
        height: 24rpx;
        margin-left: 15rpx;
    }
    .times>.oprate{
    	width: 58upx;
    	height: 36upx;
    	position: relative;
    }
    .times>.oprate>image{
    	width: 100%;
    	height: 100%;
    }
    /* 点赞、评论 */
    .reply-box{
    	width: 82vw;
    	margin-left: 12vw;
    	/* background-color: #f7f7f7; */
        /* padding: 5rpx 0 10rpx; */
        background-color: #f8f8f8;
    	border-radius: 5upx;
    	margin-top: 20upx;
    }
    .likes{
    	display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    	padding: 15upx 3vw;
        border-bottom: 1px solid #e6e6e6;
    }
    .likes>image{
    	width: 32upx;
    	height: 32upx;
    	margin-right: 14upx;
    }
    .likes>view{
    	font-size:28upx;
    	color: #54639c;
    	// font-weight: bold;
    	line-height: 1;
    	/* flex:1 */
        margin-right: 5upx;
    }
    
    .reply{
    	/* padding: 26upx 3vw; */
        padding: 10rpx 3vw;
    	/* border-top: 1px solid #e7e7e7; */
    }
    .reply>view{
    	font-size: 28upx;
    	/* margin-bottom: 18upx; */
    }
    .reply-text{
    	font-size: 28upx;
    	color: #54639c;
    	// font-weight: bold;
    }
    .colon{
        color: #000;
    }
    
    .btn{
        width: 122rpx;
        height: 122rpx;
        background-color: #f29700;
        border-radius: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 22rpx;
        color: #fff;
        position: fixed;
        right: 20rpx;
        bottom: 270rpx;
        z-index: 9;
    }
    .write-icon{
        width: 39rpx;
        height: 45rpx;
        margin-bottom: 10rpx;
    }
    
    .oprate-btn{
        width: 60rpx;
        height: 36rpx;
        background-color: #f8f8f8;
        text-align: center;
        line-height: 36rpx;
        border-radius: 6rpx;
    }
    .oprate-box{
    	width: 520upx;
    	height: 78upx;
    	background-color: #4c4c4c;
    	border-radius: 16upx;
    	display: flex;
    	align-items: center;
    	justify-content: space-between;
    	position: absolute;
    	top:-22upx;
    	left: -555upx;
        z-index: 99;
    }
    .oprate-box>view{
    	width: 170upx;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    }
    .oprate-box>view>image{
    	width: 28upx;
    	height: 28upx;
    	margin-right:10upx;
    }
    .oprate-box>view>view{
    	font-size: 26upx;
    	color:#fff;
    }
    .bor-r{
    	border-right: 1px solid #fff;
    }
    .bor-l{
    	border-left: 1px solid #fff;
    }
    
    .share-button {
        width: 170upx;
        height: 78upx;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	font-size: 26upx;
    	color:#fff;
        background: transparent !important;
    
    	&:after {
    		border: none;
    	}
    }
    .share-icon{
        width: 28upx;
        height: 28upx;
        margin-right:10upx;
    }

</style>
